<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,body{
                width:100%;
                background:transparent;
            }
            #line{
                width:200px;
                height:20px;
                background:transparent;
                border-bottom:1px solid #0062CC;
            }
            #line:active{
                height:100px;
            }
    </style>
</head>

<body tapmode=''>
    <div id="line">
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var h = 0;
apiready = function() {
    setInterval(moveline, 20);
};

function moveline() {
    var line = $api.byId('line');
    if (h == 200) {
        h = 0;
    } else {
        h = h + 1;
    }
    var hstr = h + 'px';
    document.getElementById('line').style.cssText = "height:" + hstr;
}
</script>

</html>
